<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElCascader, ElForm } from "element-plus";
import { getDictData } from "@/api/system";
import { getDistrictInfo } from "@/api/vppUser";
import { cloneDeep } from "@pureadmin/utils";
import TitleGroup from "@/components/FormRowTitle/index.vue";
const props = defineProps({
  handleStatus: {
    type: String,
    default: "add"
  }
});
const form = reactive({
  data: {
    id: null,
    name: null,
    fullName: null,
    address: null,
    siteAddress: null,
    groupName: null,
    districtId: null,
    area: null,
    sector: null,
    sectorInfo: null,
    dispatchName: null,
    gridVoltageLevel: null,
    substationName: null,
    powerBroker: null,
    distributionNo: null,
    govFundRate: null,
    capRate: null,
    capRefund: null,
    maxLoad: null,
    maxOutput: null,
    longitude: null,
    latitude: null,
    altitude: null,
    fenceXy: null,
    longitudeAndLatitude: null,
    inMarket: null,
    shareRatio: null,
    totalRevenue: null,
    shareRevenue: null,
    status: null,
    initOnlineTime: null,
    onlineTime: null,
    offlineTime: null,
    totalP: null,
    totalQ: null,
    totalEnergy: null,
    storageNum: null,
    terminalNum: null,
    equipNum: null,
    storageOnnum: null,
    terminalOnnum: null,
    equipOnnum: null,
    emsCode: null,
    hisCode: null,
    emsIpadd: null,
    hisIpadd: null,
    contactName: null,
    contactTel: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    gridRate: null,
    substationType: null
  },
  rules: {
    name: [{ required: true, message: "用户名称不能为空", trigger: "blur" }],
    fullName: [
      { required: true, message: "用户全称不能为空", trigger: "blur" }
    ],
    dispatchName: [
      { required: true, message: "上级调度名称不能为空", trigger: "blur" }
    ],
    gridVoltageLevel: [
      { required: true, message: "并网电压等级不能为空", trigger: "change" }
    ],
    initOnlineTime: [
      { required: false, message: "首次上线时间不能为空", trigger: "change" }
    ],
    onlineTime: [
      { required: false, message: "上线时间不能为空", trigger: "change" }
    ],
    offlineTime: [
      { required: false, message: "下线时间不能为空", trigger: "change" }
    ],
    contactName: [
      { required: true, message: "联系人不能为空", trigger: "blur" }
    ],
    contactTel: [
      { required: true, message: "联系电话不能为空", trigger: "blur" }
    ]
  }
});
const dictList = reactive({
  data: {
    sector: [],
    inMarket: [],
    status: [],
    substationType: []
  }
});
const init = async () => {
  const sectorData = await getDictData({
    dictName: "vpp_sector_type"
  });
  const substationNameData = await getDictData({
    dictName: "vpp_substation"
  });
  const VoltageLevel = await getDictData({
    dictName: "VoltageLevel"
  });
  const inMarketData = await getDictData({
    dictName: "vpp_market_type"
  });
  const statusData = await getDictData({
    dictName: "vpp_user_status"
  });
  dictList.data.sector = sectorData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.inMarket = inMarketData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.status = statusData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.VoltageLevel = VoltageLevel.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
  dictList.data.substationType = substationNameData.content.map(item => ({
    ...item,
    value: parseInt(item.value)
  }));
};
init();
const district = ref<InstanceType<typeof ElCascader>>();

const disProps = {
  lazy: true,
  label: "label",
  value: "id",
  lazyLoad: (node, resolve) => {
    const { level } = node;
    if (level === 0) {
      getDistrictInfo({ pid: 0 }).then(res => {
        res.forEach(item => {
          item.leaf = !item.hasChildren;
          item.value = item.id;
        });
        resolve(res);
      });
    } else {
      getDistrictInfo({ pid: node.data.id }).then(res => {
        res.forEach(item => {
          item.leaf = !item.hasChildren;
          item.value = item.id;
        });
        resolve(res);
      });
    }
  }
};
const defaultFormData = reactive({
  data: {}
});
const setForm = formData => {
  defaultFormData.data = cloneDeep(formData);
  form.data = cloneDeep(formData);
  if (formData.districtId) {
    form.data.districtId = form.data.districtId
      .split(",")
      .map(i => parseInt(i));
    defaultFormData.data.districtId = defaultFormData.data.districtId
      .split(",")
      .map(i => parseInt(i));
  }
};
const formRef = ref<InstanceType<typeof ElForm>>();
const validateForm = () => {
  return new Promise((resolve, reject) => {
    formRef.value.validate(valid => {
      resolve(valid);
    });
  });
};
const getFormData = () => {
  let data = cloneDeep(form.data);
  let nodes = district.value.getCheckedNodes();
  if (nodes.length) {
    data.districtName = nodes[0].pathLabels.join(",");
    data.districtId = data.districtId.join(",");
  }
  return data;
};
const resetForm = () => {
  form.data = cloneDeep(defaultFormData.data);
};
defineExpose({
  setForm,
  validateForm,
  getFormData,
  resetForm
});
</script>

<template>
  <el-scrollbar height="100%">
    <el-form
      ref="formRef"
      :model="form.data"
      :rules="form.rules"
      label-width="150px"
      style="display: block; width: 100%"
      class="px-[20px]"
      :disabled="handleStatus === 'look'"
    >
      <el-row>
        <TitleGroup :title="'基础数据'">
          <el-row class="mt-[20px]">
            <el-col :span="8">
              <el-form-item label="用户名称" prop="name">
                <el-input v-model="form.data.name" placeholder="用户名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户全称" prop="fullName">
                <el-input v-model="form.data.fullName" placeholder="用户全称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属公司名称">
                <el-input
                  v-model="form.data.groupName"
                  placeholder="所属公司名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人" prop="contactName">
                <el-input
                  v-model="form.data.contactName"
                  placeholder="联系人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系电话" prop="contactTel">
                <el-input
                  v-model="form.data.contactTel"
                  placeholder="联系电话"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行政区">
                <el-cascader
                  ref="district"
                  v-model="form.data.districtId"
                  style="width: 100%"
                  :props="disProps"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户现场地址">
                <el-input
                  v-model="form.data.siteAddress"
                  placeholder="用户现场地址"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户注册地址">
                <el-input
                  v-model="form.data.address"
                  placeholder="用户注册地址"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="占地面积(平方公里)">
                <el-input-number
                  v-model="form.data.area"
                  style="width: 100%"
                  placeholder="占地面积"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属行业">
                <el-select
                  v-model="form.data.sector"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictList.data.sector"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行业描述">
                <el-input
                  v-model="form.data.sectorInfo"
                  placeholder="行业描述"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="经度">
                <el-input-number
                  v-model="form.data.longitude"
                  style="width: 100%"
                  placeholder="经度"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="纬度">
                <el-input-number
                  v-model="form.data.latitude"
                  style="width: 100%"
                  placeholder="纬度"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="海拔">
                <el-input-number
                  v-model="form.data.altitude"
                  style="width: 100%"
                  placeholder="海拔"
                />
              </el-form-item>
            </el-col>
            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="围栏坐标">-->
            <!--                <el-input-->
            <!--                  v-model="form.data.fenceXy"-->
            <!--                  style="width: 100%"-->
            <!--                  placeholder="围栏坐标"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <!--            <el-col :span="8">-->
            <!--              <el-form-item label="经纬度(虚拟字段)">-->
            <!--                <el-input-->
            <!--                  v-model="form.data.longitudeAndLatitude"-->
            <!--                  placeholder="经纬度(虚拟字段)"-->
            <!--                />-->
            <!--              </el-form-item>-->
            <!--            </el-col>-->
            <el-col :span="8">
              <el-form-item label="整体状态">
                <el-select
                  v-model="form.data.status"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictList.data.status"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总有功(kW)">
                <el-input-number
                  v-model="form.data.totalP"
                  style="width: 100%"
                  placeholder="总有功(kW)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总无功(kVar)">
                <el-input-number
                  v-model="form.data.totalQ"
                  style="width: 100%"
                  placeholder="总无功(kVar)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总电量(度)">
                <el-input-number
                  v-model="form.data.totalEnergy"
                  style="width: 100%"
                  placeholder="总电量(度)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="上级调度名称" prop="dispatchName">
                <el-input
                  v-model="form.data.dispatchName"
                  placeholder="上级调度名称"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </TitleGroup>
        <TitleGroup :title="'终端决策信息'">
          <el-row class="mt-[20px]">
            <el-col :span="8">
              <el-form-item label="首次上线时间" prop="initOnlineTime">
                <el-date-picker
                  v-model="form.data.initOnlineTime"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  date-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  type="datetime"
                  placeholder="请选择"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                class="public-disabled-label"
                label="上线时间"
                prop="onlineTime"
              >
                <el-date-picker
                  v-model="form.data.onlineTime"
                  disabled
                  value-format="YYYY-MM-DD HH:mm:ss"
                  date-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  type="datetime"
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                class="public-disabled-label"
                label="下线时间"
                prop="offlineTime"
              >
                <el-date-picker
                  v-model="form.data.offlineTime"
                  disabled
                  value-format="YYYY-MM-DD HH:mm:ss"
                  date-format="YYYY-MM-DD HH:mm:ss"
                  style="width: 100%"
                  type="datetime"
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="并网电压等级" prop="gridVoltageLevel">
                <el-select
                  v-model="form.data.gridVoltageLevel"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictList.data.VoltageLevel"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="并网变电站名称">
                <el-input
                  v-model="form.data.substationName"
                  placeholder="并网变电站"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="并网变电站类型">
                <el-select
                  v-model="form.data.substationType"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictList.data.substationType"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最大负荷(kW)">
                <el-input-number
                  v-model="form.data.maxLoad"
                  style="width: 100%"
                  placeholder="最大负荷(kW)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最大出力(kW)">
                <el-input-number
                  v-model="form.data.maxOutput"
                  style="width: 100%"
                  placeholder="最大出力(kW)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="储能系统总数">
                <el-input-number
                  v-model="form.data.storageNum"
                  style="width: 100%"
                  placeholder="储能系统总数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="负荷控制终端总数">
                <el-input-number
                  v-model="form.data.terminalNum"
                  style="width: 100%"
                  placeholder="负荷控制终端总数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用电设备总数">
                <el-input-number
                  v-model="form.data.equipNum"
                  style="width: 100%"
                  placeholder="用电设备总数"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                class="public-disabled-label"
                label="储能系统在线数"
              >
                <el-input-number
                  v-model="form.data.storageOnnum"
                  disabled
                  style="width: 100%"
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                class="public-disabled-label"
                label="负荷控制终端在线数"
              >
                <el-input-number
                  v-model="form.data.terminalOnnum"
                  disabled
                  style="width: 100%"
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                class="public-disabled-label"
                label="用电设备在线数"
              >
                <el-input-number
                  v-model="form.data.equipOnnum"
                  disabled
                  style="width: 100%"
                  placeholder="-"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="容量补偿">
                <el-input-number
                  v-model="form.data.capRefund"
                  style="width: 100%"
                  placeholder="容量补偿"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="EMS代码">
                <el-input v-model="form.data.emsCode" placeholder="EMS代码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="HIS代码">
                <el-input v-model="form.data.hisCode" placeholder="HIS代码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="EMS地址">
                <el-input v-model="form.data.emsIpadd" placeholder="EMS地址" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="HIS地址">
                <el-input v-model="form.data.hisIpadd" placeholder="HIS地址" />
              </el-form-item>
            </el-col>
          </el-row>
        </TitleGroup>
        <TitleGroup :title="'交易补贴信息'">
          <el-row class="mt-[20px]">
            <el-col :span="8">
              <el-form-item label="售电公司名称">
                <el-input
                  v-model="form.data.powerBroker"
                  placeholder="售电公司名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用电户号">
                <el-input
                  v-model="form.data.distributionNo"
                  placeholder="用电户号"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="参加市场">
                <el-select
                  v-model="form.data.inMarket"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in dictList.data.inMarket"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分成比例">
                <el-input-number
                  v-model="form.data.shareRatio"
                  style="width: 100%"
                  placeholder="分成比例"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总利润(元)">
                <el-input-number
                  v-model="form.data.totalRevenue"
                  style="width: 100%"
                  placeholder="总利润(元)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分成利润(元)">
                <el-input-number
                  v-model="form.data.shareRevenue"
                  style="width: 100%"
                  placeholder="分成利润(元)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="政府基金">
                <el-input-number
                  v-model="form.data.govFundRate"
                  style="width: 100%"
                  placeholder="政府基金"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="容量电价">
                <el-input-number
                  v-model="form.data.capRate"
                  style="width: 100%"
                  placeholder="容量电价"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="输配电价">
                <el-input v-model="form.data.gridRate" placeholder="输配电价" />
              </el-form-item>
            </el-col>
          </el-row>
        </TitleGroup>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
